<template>
  <div v-if="isShow" class="loading">
    <div class="loading-container">
      Loading...
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
let isShow = ref<boolean>(false)
const show = () => {
  isShow.value = true
}
const hide = () => {
  isShow.value = false
}
//setup 里面的东西都在 component.setupState 里 但是Vue不让咱们用


//使用下面的方法暴露出去  再使用
defineExpose({
  isShow,
  show,
  hide
})
</script>

<style scoped lang="scss">
  .loading{
    position: fixed;
    inset: 0;//占满
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    &-container{
      font-size: 30px;
      color: aquamarine;
    }
  }
</style>